import React from 'react';
import { Card, Tree, Button, Space } from 'antd';
import { ApartmentOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons';

/**
 * 组织架构页面
 * 展示部门层级结构
 */
const DepartmentStructure: React.FC<React.PropsWithChildren<unknown>> = () => {
  // 模拟组织架构数据
  const treeData = [
    {
      title: '总公司',
      key: '0',
      children: [
        {
          title: '技术部',
          key: '0-0',
          children: [
            { title: '前端开发组', key: '0-0-0' },
            { title: '后端开发组', key: '0-0-1' },
            { title: '测试组', key: '0-0-2' },
          ],
        },
        {
          title: '市场部',
          key: '0-1',
          children: [
            { title: '市场推广组', key: '0-1-0' },
            { title: '品牌策划组', key: '0-1-1' },
          ],
        },
        {
          title: '财务部',
          key: '0-2',
          children: [
            { title: '会计核算组', key: '0-2-0' },
            { title: '财务分析组', key: '0-2-1' },
          ],
        },
      ],
    },
  ];

  return (
    <div>
      <h2><ApartmentOutlined /> 组织架构</h2>
      <Card>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Space>
            <Button type="primary" icon={<PlusOutlined />}>
              添加部门
            </Button>
            <Button icon={<EditOutlined />}>
              编辑架构
            </Button>
          </Space>
          <Tree
            showLine
            defaultExpandedKeys={['0', '0-0', '0-1', '0-2']}
            treeData={treeData}
          />
        </Space>
      </Card>
    </div>
  );
};

export default DepartmentStructure;